/*
 * @Description  : header 组件
 * @Author       : Keyman
 * @Date         : 2025-11-11 22:40:58
 * @LastEditors  : Keyman
 * @LastEditTime : 2025-11-21 14:44:15
 */

import {
  DownOutlined,
  UserOutlined,
  PoweroffOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Dropdown, Space } from "antd";
import { clearToken } from "../../store/login/authSlice";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

function MyHeader(): JSX.Element {
  const username = sessionStorage.getItem("username");
  const navigetor = useNavigate();
  const dispatch = useDispatch();

  const onClick: MenuProps["onClick"] = ({ key }) => {
    if (key === "1") {
      // 跳转到个人中心
      navigetor("/person");
    } else if (key === "2") {
      sessionStorage.removeItem("username");
      dispatch(clearToken());
    }
  };

  return (
    <>
      <Dropdown menu={{ items, onClick }}>
        <a onClick={(e) => e.preventDefault()}>
          <Space>
            欢迎您,{username}
            <DownOutlined />
          </Space>
        </a>
      </Dropdown>
    </>
  );
}

const items: MenuProps["items"] = [
  {
    key: "1",
    label: <a target="_blank">个人中心</a>,
    icon: <UserOutlined />,
  },
  {
    key: "2",
    label: <a target="_blank">退出登录</a>,
    icon: <PoweroffOutlined />,
  },
];

export default MyHeader;
